<template>
    <div class="help-request">
      <el-card
        v-for="item in helpList"
        :key="item.id"
        class="help-request-card"
        :class="getCategoryClass(item.eventType)"
      >
        <div class="card-header">
          <span class="category">{{ item.categoryText }}</span>
        </div>
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
        <span class="reward">
  酬劳：{{ item.reward > 0 ? '￥' + item.reward.toFixed(2)+'元' : '免费' }}
</span>
        <el-button type="primary" @click="toggleContact(item)" class="receive-button">
         接取任务
        </el-button>
        <div class="card-footer">
          <span class="date">{{ formatDate(item.eventDate) }}</span>
          <span class="author">发布者：{{ item.createdByName }}</span>
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { listAllConditionEvents,updateReceiveEvent,listAllConditionEventsWithoutSelf } from '@/api/event';
  import { EventType } from '@/enums/event'; // 确保这个路径正确
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  const helpList = ref([]);
  
  // 获取事件数据
  const getData = () => {
    if(localStorage.getItem('token')==null){
      listAllConditionEvents().then(res => {
      if (res.code === 200) {
        helpList.value = res.data.map(item => ({
          ...item,
          categoryText: getCategoryText(item.eventType), // 添加类别文本
        }));
      }
    });
    }else{
      listAllConditionEventsWithoutSelf().then(res => {
      if (res.code === 200) {
        helpList.value = res.data.map(item => ({
          ...item,
          categoryText: getCategoryText(item.eventType), // 添加类别文本
        }));
      }
      });
    }
    
  };
  
  // 获取事件类别文本
  const getCategoryText = (type) => {
    switch (type) {
      case EventType.COURIER_PICKUP: return '代取快递';
      case EventType.PENDING_PRINT: return '待打印';
      case EventType.SECOND_HAND_ITEMS: return '求取二手物品';
      case EventType.CAMPUS_DELIVERY: return '校园即送';
      case EventType.AGENT_PURCHASE: return '代购服务';
      case EventType.COMPANIONSHIP: return '陪伴服务';
      case EventType.TUTORING: return '学习辅导';
      case EventType.CARPOOLING: return '拼车服务';
      case EventType.HOUSING_RENTAL: return '房屋租赁';
      case EventType.EVENT_ORGANIZATION: return '活动组织';
      case EventType.SECOND_HAND_TRANSACTIONS: return '二手交易';
      case EventType.SKILL_SWAP: return '技能交换';
      case EventType.HEALTH_ADVISORY: return '健康咨询';
      case EventType.VOLUNTEER_SERVICE: return '志愿服务';
      default: return '其他';
    }
  };
  
  // 获取类别样式
  const getCategoryClass = (type) => {
    switch (type) {
      case EventType.COURIER_PICKUP: return 'category-courier';
      case EventType.PENDING_PRINT: return 'category-print';
      case EventType.SECOND_HAND_ITEMS: return 'category-second-hand';
      case EventType.CAMPUS_DELIVERY: return 'category-delivery';
      case EventType.AGENT_PURCHASE: return 'category-purchase';
      case EventType.COMPANIONSHIP: return 'category-companionship';
      case EventType.TUTORING: return 'category-tutoring';
      case EventType.CARPOOLING: return 'category-carpooling';
      case EventType.HOUSING_RENTAL: return 'category-housing';
      case EventType.EVENT_ORGANIZATION: return 'category-event';
      case EventType.SECOND_HAND_TRANSACTIONS: return 'category-second-hand-transaction';
      case EventType.SKILL_SWAP: return 'category-skill-swap';
      case EventType.HEALTH_ADVISORY: return 'category-health';
      case EventType.VOLUNTEER_SERVICE: return 'category-volunteer';
      default: return '';
    }
  };
  
  // 日期格式化
  const formatDate = (dateStr) => {
    const date = new Date(dateStr);
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false,
    }).replace(/\//g, '-');
  };
  
  // 切换联系方式显示
  const toggleContact = (item) => {
    ElMessageBox.confirm(
        '确定接取该任务吗？' ,
        '确认框',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning', // 这里的类型可以根据需要更改
        }
    ).then(() => {
    item.showContact = !item.showContact; // 切换显示状态
    updateReceiveEvent(item.id).then(res => {
      if (res.code === 200) {
        console.log("更新成功")
        ElMessage.success('接取成功');
        getData(); // 更新数据
      }
    });
  
    console.log("item:",item)
    }).catch(() => {
        // on cancel
    });
  };
  
  // 页面加载完成后获取数据
  onMounted(() => {
    getData();
  });
  </script>
  
  <style scoped>
  .help-request {
    margin-top: 20px;
  }
  
  .help-request-card {
    margin-bottom: 10px;
    position: relative;
    padding: 20px;
    backdrop-filter: blur(10px); /* 添加模糊效果 */
    border-radius: 8px;
    color: #fff; /* 字体颜色设置为白色 */
  }
  
  .card-header {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .receive-button {
  margin-left: 90%; /* 将按钮推到右侧 */
  width: 100px; /* 设置按钮宽度 */
  background-color: rgb(50, 141, 74);
}

  .contact-info {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.8); /* 半透明白色 */
}

  
  .category {
    padding: 5px 10px;
    border-radius: 3px;
    color: #fff;
  }
  
  .category-courier {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.7), rgba(76, 175, 80, 0.9)); /* 绿色渐变 */
  }
  
  /* 继续为其他类别添加样式 */
  .category-print {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.7), rgba(33, 150, 243, 0.9)); /* 蓝色渐变 */
  }
  
  .category-second-hand {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.7), rgba(255, 152, 0, 0.9)); /* 橙色渐变 */
  }
  
  .category-delivery {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.7), rgba(156, 39, 176, 0.9)); /* 紫色渐变 */
  }
  
  .category-purchase {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.7), rgba(255, 87, 34, 0.9)); /* 红色渐变 */
  }
  
  .category-companionship {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.7), rgba(0, 188, 212, 0.9)); /* 青色渐变 */
  }
  
  .category-tutoring {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.7), rgba(255, 193, 7, 0.9)); /* 黄色渐变 */
  }
  
  .category-carpooling {
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.7), rgba(255, 0, 255, 0.9)); /* 粉色渐变 */
  }
  
  .category-housing {
    background: linear-gradient(135deg, rgba(0, 128, 0, 0.7), rgba(0, 128, 0, 0.9)); /* 深绿色渐变 */
  }
  
  .category-event {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.7), rgba(255, 165, 0, 0.9)); /* 橙色渐变 */
  }
  
  .category-second-hand-transaction {
    background: linear-gradient(135deg, rgba(128, 0, 128, 0.7), rgba(128, 0, 128, 0.9)); /* 紫色渐变 */
  }
  
  .category-skill-swap {
    background: linear-gradient(135deg, rgba(0, 0, 255, 0.7), rgba(0, 0, 255, 0.9)); /* 蓝色渐变 */
  }
  
  .category-health {
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.7), rgba(255, 20, 147, 0.9)); /* 深粉色渐变 */
  }
  
  .category-volunteer {
    background: linear-gradient(135deg, rgba(0, 255, 127, 0.7), rgba(0, 255, 127, 0.9)); /* 亮绿色渐变 */
  }
  
  .card-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  
  .date {
    color: rgba(255, 255, 255, 0.8); /* 半透明白色 */
  }
  
  .author {
    color: rgba(255, 255, 255, 0.8); /* 半透明白色 */
  }
  </style>